<!-- 批发采购收货页面 -->
<template>
  <div class="wholesale-receive">
    <el-container class="container-box is-vertical">
      <header class="header-detail">
        <div v-for="item in received.formDetail" :key="item.key" class="detail-item">
          {{ item.label }}
          :
          {{ item.value }}
        </div>
      </header>
      <el-editable height="200" :columns="received.columns" :data="received.data">
        <template slot="default-action" slot-scope="scope">
          <el-button type="text" @click="getProductDetail(scope.row)">查看产品详情</el-button>
          <el-button type="text" @click="receiveConfirm(scope.row)">收货确认</el-button>
        </template>
      </el-editable>
    </el-container>

    <!-- 产品详情弹窗列表 -->
    <el-dialog
      class="product-detail-dialog"
      title="产品详情"
      :visible.sync="product.visible"
      width="70%"
    >
      <el-editable
        v-loading="product.loading"
        class="product-detail-list"
        :data="product.data"
        height="400px"
        :columns="product.columns"
        :paload="product.data"
        :stripe="true"
        @reload="reloadProductData"
      >
        <template slot="default-index" slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-editable>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="confirm.visible" width="30%">
      <span>是否要对当前发货单进行收货确认？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirm.visible = false">取 消</el-button>
        <el-button type="primary" @click="confirmReceiveOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable';
import { receiveListColumns, productListColumns } from './index.const';
export default {
  name: 'WholesaleReceive',
  components: { ElEditable },
  data() {
    return {
      // 主体页面收货数据
      received: {
        columns: receiveListColumns,
        formDetail: [
          { label: '订单编号', value: 'PF202002102213371234', key: 1 },
          { label: '供应商', value: '河南国科恒泰医疗科技有限公司', key: 2 },
          { label: '生产厂家', value: '美敦力(上海)', key: 3 }
        ],
        data: [
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' },
          { orderCode: '123' }
        ]
      },
      //   产品详情弹窗数据
      product: {
        visible: false,
        data: [{ a: '123' }, { a: '123' }, { a: '123' }, { a: '123' }],
        columns: productListColumns,
        loading: false
      },
      confirm: {
        visible: false
      }
    };
  },
  mounted() {
    this.getReceiveList();
    this.getReceiveInfo();
  },
  methods: {
    // 查看产品详情
    getProductDetail(row) {
      this.product.visible = true;
    },
    // 收货确认
    receiveConfirm(row) {
      this.confirm.visible = true;
    },
    // 收货确认弹窗——确认收货按钮
    confirmReceiveOrder() {
      this.confirm.visible = false;
    },
    // 获取收货列表数据
    getReceiveList() {},
    // 获取收货列表详情数据
    getReceiveInfo() {},
    // 重新获取列表数据
    reloadProductData() {}
  }
};
</script>

<style lang="less">
.wholesale-receive {
  padding: 0 !important;
  .container-box {
    height: 100%;
  }
  .header-detail {
    padding: 0 8px;
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 900;
    height: 50px;
    border-bottom: 1px solid #e4e4df;
    margin-bottom: 20px;
    flex-shrink: 0;
  }
  .el-editable {
    height: 400px;
    margin: 0 8px;
  }
}
</style>
